<template>
  <div class="edit-info-item-container">
    <van-nav-bar 
      :title="`编辑${operation}`"
      @click-left="$router.back()"
      left-arrow
      left-text="返回"
      right-text="提交"
      @click-right="handleSubmit"
    />

    <div class="content">
      <h3>{{operation}}</h3>
      <van-field v-model="text" placeholder="请输入" />
    </div>
  </div>
</template>

<script setup lang="ts">
import { editUserInfoData, getUserInfoData } from '@/assets/api/infoIndex';
import { showToast } from 'vant';
import { onMounted, ref } from 'vue';
import { useRoute, useRouter } from 'vue-router';

const operation = ref('昵称')
const $route = useRoute()
const $router = useRouter()

onMounted(async() => {
  const query = $route.query
  const res = await getUserInfoData()
  text.value = query.key === 'name' ? res.data?.name : res.data?.intro
  operation.value = query.text as string
})
const text = ref('')

const handleSubmit = async() => {
  if(!text.value.trim()) {
    showToast('内容不能为空');
    return
  }

  const params = operation.value === '昵称' ? {
    name: text.value
  } : {
    intro: text.value
  }
  const res = (await editUserInfoData(params))
  showToast('修改成功')
  $router.back()

  


}

</script>

<style scoped lang='less'>
.edit-info-item-container {
  width: 100%;
  height: 100%;
  background-color: #F7F8FA;
  h3 {
    font-size: .36rem;
    line-height: .96rem;
  }
  padding: .4rem;

  .common-nav {
    display: flex;
    justify-content: space-between;
    span {
      color: red;
    }
  }

  .content {
    border-top: 1px solid #ccc;
  }

}
</style>